let htmlCode = `
<div id="to" style="display:block;position: absolute;left:500px;top:200px">
    <input  type="button" value="转成新浪" onclick="toOtherUrl('https://www.sina.com.cn/')"> 
    <input  type="button" value="转成百度" onclick="toOtherUrl('https://www.baidu.com/')">  
</div>
`

window.onload = function () {

    //未使用jQuery,所有都是原生操作
    setTimeout(() => {
        document.getElementsByTagName('body')[0].innerHTML += htmlCode;

        //获取所有子元素
        let children = document.getElementById("to").childNodes;

        //因为浏览器会把dom节点下的空格 换行 文本都会当成一个元素 ，我们要找元素节点的话，只能把他们剔除
        for (let i = 0; i < children.length; i++) {
            //console.log(children[i].nodeName);
            if (children[i].nodeName == '#text') {
                continue;
            }
            //设置css
            children[i].style.padding = "10px 14px";
        }


    }, 10);



}

//监听键盘

var showButtons = false;

var mouseLeft = 0;
var mouseTop = 0;
window.onkeydown = function (event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    //console.log(e.keyCode);

    // 监控Ctrl键 e.ctrlKey
    if (e && e.keyCode == 17) { // 按 Ctrl
        showButtons = !showButtons;
        document.getElementById("to").style.display = showButtons ? "block" : "none";

        //把按钮控制面板移到鼠标附近
        document.getElementById("to").style.left = mouseLeft + "px";
        document.getElementById("to").style.top = mouseTop + "px";
        console.log(mouseLeft);
    }

}

//实时获取鼠标位置
window.onmousemove = function (event) { mouseLeft = event.clientX; mouseTop = event.clientY };

function toOtherUrl(toUrl) {

    window.location.href = toUrl;

}

